﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 jQuery 库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <link href="~/lib/wangeditor/style.css" rel="stylesheet" />
    <style>
        /* 增加编辑器容器的高度 */
        #editor-container {
            min-height: 300px;
        }

        .navbar {
            display: none;
        }
    </style>

</head>

<body class="bg-gray-100 p-8">
    <h3>病案须知添加</h3>
    <form class="bg-white p-6 rounded shadow-md">
        <table class="w-full">
            <tr>
                <td colspan="2" class="bg-gray-200 text-gray-600 text-right p-2">
                    <span class="text-red-500">内容*</span>
                </td>
                <td colspan="10" class="p-2">
                    <div id="editor-wrapper">
                        <div id="toolbar-container"></div>
                        <div id="editor-container"></div>
                    </div>
                </td>
            </tr>
        </table>
        <div class="mt-4">
            <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded"
                    lay-submit lay-filter="addIntroductionHospital">
                立即提交
            </button>
            <span id="status-message" class="ml-4 text-gray-600"></span>
        </div>
    </form>
    <script src="~/lib/wangeditor/index.js"></script>
    <script>
        const { createEditor, createToolbar } = window.wangEditor;

        const editorConfig = {
            placeholder: 'Type here...',
            onChange(editor) {
                const html = editor.getHtml();
                console.log('editor content', html);
                console.log(html);
            },
        };

        const editor = createEditor({
            selector: '#editor-container',
            html: '<p><br></p>',
            config: editorConfig,
            mode: 'default',
        });

        const toolbarConfig = {};

        const toolbar = createToolbar({
            editor,
            selector: '#toolbar-container',
            config: toolbarConfig,
            mode: 'default',
        });

        const submitButton = document.querySelector('button[lay-filter="addIntroductionHospital"]');
        const statusMessage = document.getElementById('status-message');

        submitButton.addEventListener('click', async (e) => {
            e.preventDefault();
            const htmlContent = editor.getHtml();
            const plainText = htmlContent.replace(/<[^>]*>/g, '');

            if (plainText.trim() === '') {
                statusMessage.textContent = '请输入内容';
                statusMessage.classList.add('text-red-500');
                return;
            }

            submitButton.disabled = true;
            submitButton.textContent = '提交中...';
            statusMessage.textContent = '';

            try {
                $.ajax({
                    url: '@ViewBag.BaseUrl/T6/Instrufordelime/AddInstrufordelime',
                    method: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({ instrufordelimeName: plainText }),
                    success: function (res) {
                        // 假设后端返回格式为 { code: 100, message: "成功" }
                        console.log(res);
                        if (res.code === 100) {
                            statusMessage.textContent = '新增成功';
                            setTimeout(() => {
                                location.reload();
                            }, 1500);
                        } else {
                            statusMessage.textContent = '新增失败';
                        }
                    },
                    error: function (xhr) {
                        // 更健壮的错误处理
                        let errorMsg = '请求失败: ';
                        try {
                            const res = JSON.parse(xhr.responseText);
                            errorMsg += res.message || xhr.statusText;
                        } catch {
                            errorMsg += xhr.statusText || '网络错误';
                        }
                        // 假设 layer 是 layui 的弹窗组件，如果未引入会报错，这里可以简单 console 输出
                        console.error(errorMsg);
                    }
                });
            }
            catch (error) {
                console.error('Error calling API:', error);
                statusMessage.textContent = '提交失败，请重试';
                statusMessage.classList.add('text-red-500');
            }
            finally {
                submitButton.disabled = false;
                submitButton.textContent = '立即提交';
            }
        });
    </script>
</body>

</html>